import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1

Rectangle {
    id: root
    width: 360; height: 300
    color: "#eeeeee"

    Component{
        id: phoneModel
        ListModel{
            ListElement{
                name : "iPhone 3Gs";
                cost : "1000";
                manufacturer: "Apple";
            }
            ListElement{
                name : "iPhone 4Gs";
                cost : "1000";
                manufacturer: "Apple";
            }
            ListElement{
                name : "iPhone 5Gs";
                cost : "1000";
                manufacturer: "Apple";
            }
            ListElement{
                name : "iPhone 6Gs";
                cost : "1000";
                manufacturer: "Apple";
            }
        }
    }

    Component{
        id : headView;
        Item {
            width: root.width
            height: 30
            RowLayout{
                anchors.left : parent.left
                anchors.verticalCenter: parent.verticalCenter
                spacing: 8
                Text{
                    text: "Name"
                    font.bold: true
                    font.pixelSize: 20
                    Layout.preferredWidth: 120
                }
                Text {
                    text: "Cost"
                    font.bold: true
                    font.pixelSize: 20
                    Layout.preferredWidth: 80
                }
                Text{
                    text: "Manufacturer"
                    font.bold: true
                    font.pixelSize: 20
                    Layout.fillWidth: true
                }
            }
        }
    }

    Component{
        id: footView
        Item {
            id: footRootItem
            width: root.width
            height: 30
            property alias text: txt.text
            signal add()
            signal insert()
            signal moveDown()
            Text {
                anchors.left: parent.left
                anchors.top : parent.top
                anchors.bottom: parent.bottom
                id: txt
                font.italic: true
                color: "blue"
                verticalAlignment: Text.AlignVCenter
            }
            Button{
                id: addOne
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                text: "Add"
                onClicked: footRootItem.add();
            }
            Button{
                id: insertOne
                anchors.right: addOne.left
                anchors.rightMargin: 4
                anchors.verticalCenter: parent.verticalCenter
                text: "Insert"
                onClicked: footRootItem.insert();
            }
            Button{
                id: moveDown
                anchors.right: insertOne.left
                anchors.rightMargin: 4
                anchors.verticalCenter: parent.verticalCentert
                text: "Down"
                onClicked: footRootItem.moveDown();
            }
        }

    }

    Component{
        id: phoneDelgate
        Item {
            id: wrapper
            width: root.width
            height: 30

            MouseArea{
                anchors.fill: parent
                onClicked: wrapper.ListView.view.currentIndex = index;
                onDoubleClicked:  wrapper.ListView.view.model.remove(index);
            }

            RowLayout{
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                spacing: 8
                Text{
                    id: coll
                    text: name
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                    Layout.preferredWidth: 120
                }
                Text{
                    text: cost
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                    Layout.preferredWidth: 80
                }
                Text{
                    text: manufacturer
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                    Layout.fillWidth: true
                }
            }
        }
    }

    ListView{
        id: listView
        anchors.fill: parent
        delegate: phoneDelgate
        model: phoneModel.createObject(listView);
        header: headView
        footer: footView
        focus: true
        highlight: Rectangle{
            color: "lightblue"
        }

        add: Transition{
            ParallelAnimation{
                NumberAnimation{
                    property: "opacity"
                    from: 0; to: 1.0
                    duration: 1000;
                }
                NumberAnimation{
                    property: "y"
                    from: 0
                    duration: 1000;
                }
            }
        }

        displaced: Transition{
            SpringAnimation{
                property: "y"
                spring: 3
                damping: 0.1
                epsilon: 0.25
            }
        }

        remove: Transition{
            SequentialAnimation{
                NumberAnimation{
                    property: "y"
                    to: 0
                    duration: 600;
                }

                NumberAnimation{
                    property: "opacity"
                    to: 0
                    duration: 400;
                }
            }
        }

        move : Transition{
            NumberAnimation{
                property: "y"
                duration: 700
                easing.type: Easing.InQuart;
            }
        }

        populate: Transition{
            NumberAnimation{
                property: "opacity";
                from : 0; to: 1.0
                duration: 1000
            }
        }

        onCurrentIndexChanged: {
            if (listView.currentIndex >= 0){
                var data = listView.model.get(listView.currentIndex);
                listView.footerItem.text = data.name + ", "
                    + data.cost + ", " + data.manufacturer;
            }else{
                listView.footerItem.text = " ";
            }
        }

        function addOne(){
            model.append(
                {
                    "name" : "MX3",
                    "cost" : "1799",
                    "manufacturer" : "MeiZu"
                }
            )
        }
        function insertOne(){
            model.insert(Math.round(Math.random()*model.count),
                 {
                     "name" : "HTC One E8",
                     "cost" : "2999",
                     "manufacturer" : "HTC"
                 }
            );
        }

        function moveDown(){
            if (currentIndex +1 < model.count){
                model.move(currentIndex, currentIndex + 1, 1);
            }
        }

        Component.onCompleted: {
            listView.footerItem.insert.connect(listView.insertOne);
            listView.footerItem.add.connect(listView.addOne);
            listView.footerItem.moveDown.connect(listView.moveDown);
        }
    }
}

